<!-- 放JavaScript -->
<script setup>
import { ref } from 'vue';

const tableData = ref([
    {
        receiver: 'Rx01',
        name: 'RX1_DSC_2M',
        station: '1.万顷沙',
        control: '遥控',
        power: '开',
        frequency: '2187.5',
        mode: 'FSK',
        bandwidth: '0.3',
        autoGain: 'Data',
        attenuator: '断开',
        audioProcessor: '断开',
        status: '正常',
    },
    {
        receiver: 'Rx02',
        name: 'RX2_DSC_4M',
        station: '1.万顷沙',
        control: '遥控',
        power: '开',
        frequency: '4207.5',
        mode: 'FSK',
        bandwidth: '0.3',
        autoGain: 'Data',
        attenuator: '10dB',
        audioProcessor: '窄带',
        status: '正常',
    },
    {
        receiver: 'Rx03',
        name: 'Rx3_DSC_6M',
        station: '1.万顷沙',
        control: '本控',
        power: '开',
        frequency: '6312.5',
        mode: 'FSK',
        bandwidth: '0.3',
        autoGain: 'Data',
        attenuator: '20dB',
        audioProcessor: '宽带',
        status: '报警',
    },
]);

const dialogVisible = ref(false);
const selectedReceiver = ref({});

const handleRowDblClick = (row) => {
    console.log("123");
    
    selectedReceiver.value = row;
    dialogVisible.value = true;
};
</script>

<!-- 放HTML -->
<template>
    <div>
        <el-table :data="tableData" style="width: 100%" @row-dblclick="handleRowDblClick">
            <el-table-column prop="receiver" label="接收机" width="100" />
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="station" label="站点" width="180" />
            <el-table-column prop="control" label="遥控" width="100" />
            <el-table-column prop="power" label="电源" width="100" />
            <el-table-column prop="frequency" label="频率" width="100" />
            <el-table-column prop="mode" label="模式" width="100" />
            <el-table-column prop="bandwidth" label="带宽" width="100" />
            <el-table-column prop="autoGain" label="自动增益" width="100" />
            <el-table-column prop="attenuator" label="衰减器" width="100" />
            <el-table-column prop="audioProcessor" label="消音器" width="100" />
            <el-table-column prop="status" label="状态" width="100">
                <template v-slot="scope">
                    <span :style="{ color: scope.row.status === '报警' ? 'red' : '' }">
                        {{ scope.row.status }}
                    </span>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="接收机详细信息">
            <div v-if="selectedReceiver">
                <p><strong>接收机：</strong>{{ selectedReceiver.receiver }}</p>
                <p><strong>名称：</strong>{{ selectedReceiver.name }}</p>
                <p><strong>站点：</strong>{{ selectedReceiver.station }}</p>
                <p><strong>遥控：</strong>{{ selectedReceiver.control }}</p>
                <p><strong>电源：</strong>{{ selectedReceiver.power }}</p>
                <p><strong>频率：</strong>{{ selectedReceiver.frequency }} kHz</p>
                <p><strong>模式：</strong>{{ selectedReceiver.mode }}</p>
                <p><strong>带宽：</strong>{{ selectedReceiver.bandwidth }} kHz</p>
                <p><strong>自动增益：</strong>{{ selectedReceiver.autoGain }}</p>
                <p><strong>衰减器：</strong>{{ selectedReceiver.attenuator }}</p>
                <p><strong>消音器：</strong>{{ selectedReceiver.audioProcessor }}</p>
                <p><strong>状态：</strong><span :style="{ color: selectedReceiver.status === '报警' ? 'red' : '' }">{{
                        selectedReceiver.status }}</span></p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<!-- 放CSS -->
<style scoped></style>
